<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="联系飞易腾科技 - 开启您的数字化之旅">
    <title>联系我们 - 飞易腾科技</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="style/fyt.css" rel="stylesheet">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="fas fa-rocket"></i> 飞易腾科技
            </a>

            <button class="navbar-toggler" type="button" id="navToggle">
                <i class="fas fa-bars"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="services.html">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="cases.html">案例</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="news.html">新闻</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">关于</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="contact.html">联系</a>
                    </li>
                    <li class="nav-item">
                        <span class="dark-mode-toggle" id="darkModeToggle">
                            <i class="fas fa-moon"></i>
                        </span>
                    </li>
                </ul>
            </div>

            <!-- Mobile Menu -->
            <div class="mobile-menu" id="mobileMenu">
                <a class="nav-link" href="index.html">首页</a>
                <a class="nav-link" href="services.html">服务</a>
                <a class="nav-link" href="cases.html">案例</a>
                <a class="nav-link" href="news.html">新闻</a>
                <a class="nav-link" href="about.html">关于</a>
                <a class="nav-link active" href="contact.html">联系</a>
            </div>
        </div>
    </nav>

    <!-- Page Header -->
    <section class="page-header">
        <div class="mesh-bg"></div>
        <div class="container text-center">
            <h1 class="display-4 fw-bold mb-3">联系我们</h1>
            <p class="lead">让我们一起开启您的数字化之旅</p>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                    <li class="breadcrumb-item active">联系</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 fade-in mb-5">
                    <h2 class="mb-4">发送消息</h2>
                    <form class="contact-form" id="contactForm">
                        <div class="form-group mb-4">
                            <input type="text" class="form-control" placeholder="您的姓名" required>
                            <i class="fas fa-user form-icon"></i>
                        </div>
                        <div class="form-group mb-4">
                            <input type="email" class="form-control" placeholder="您的邮箱" required>
                            <i class="fas fa-envelope form-icon"></i>
                        </div>
                        <div class="form-group mb-4">
                            <input type="tel" class="form-control" placeholder="联系电话" required>
                            <i class="fas fa-phone form-icon"></i>
                        </div>
                        <div class="form-group mb-4">
                            <select class="form-control" required>
                                <option value="">请选择服务类型</option>
                                <option value="website">网站建设</option>
                                <option value="software">软件开发</option>
                                <option value="app">APP/小程序开发</option>
                                <option value="design">视觉设计</option>
                                <option value="outsourcing">人才外包</option>
                                <option value="erp">ERP进销存管理系统</option>
                                <option value="crm">CRM客户关系管理系统</option>
                                <option value="mall">商城系统</option>
                                <option value="other">其他咨询</option>
                            </select>
                            <i class="fas fa-list form-icon"></i>
                        </div>
                        <div class="form-group mb-4">
                            <textarea class="form-control" rows="6" placeholder="项目需求描述" required></textarea>
                            <i class="fas fa-comment-dots form-icon"></i>
                        </div>
                        <button type="submit" class="submit-btn w-100">
                            <span class="btn-text">提交咨询</span>
                        </button>
                    </form>
                </div>

                <div class="col-lg-6 fade-in">
                    <h2 class="mb-4">联系方式</h2>
                    <div class="contact-info">
                        <div class="contact-item mb-4">
                            <i class="fas fa-map-marker-alt" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                            <div>
                                <strong>公司地址</strong>
                                <p class="text-muted mb-0">中国·深圳·南山区科技园南区深圳湾科技生态园</p>
                            </div>
                        </div>

                        <div class="contact-item mb-4">
                            <i class="fas fa-phone" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                            <div>
                                <strong>联系电话</strong>
                                <p class="text-muted mb-0">400-888-8888</p>
                                <p class="text-muted small mb-0">周一至周五 9:00 - 18:00</p>
                            </div>
                        </div>

                        <div class="contact-item mb-4">
                            <i class="fas fa-envelope" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                            <div>
                                <strong>电子邮箱</strong>
                                <p class="text-muted mb-0">contact@feiyit.com</p>
                                <p class="text-muted small mb-0">我们会在24小时内回复您</p>
                            </div>
                        </div>

                        <div class="contact-item mb-4">
                            <i class="fas fa-clock" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                            <div>
                                <strong>工作时间</strong>
                                <p class="text-muted mb-0">周一至周五 9:00 - 18:00</p>
                                <p class="text-muted small mb-0">周末及法定节假日休息</p>
                            </div>
                        </div>

                        <div class="mt-5">
                            <h4 class="mb-3">关注我们</h4>
                            <div class="footer-links">
                                <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
                            </div>
                        </div>

                        <!-- 地图占位 -->
                        <div class="mt-5">
                            <h4 class="mb-3">办公地点</h4>
                            <div class="map-placeholder" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 300px; border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <div class="text-center text-white">
                                    <i class="fas fa-map-marked-alt" style="font-size: 3rem; opacity: 0.8;"></i>
                                    <p class="mt-3 mb-0">地图位置</p>
                                    <p class="small">深圳市南山区科技园</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="bg-light py-5">
        <div class="container">
            <h2 class="section-title">常见问题</h2>
            <p class="section-subtitle">快速了解您可能关心的问题</p>
            <div class="row mt-5">
                <div class="col-lg-6 fade-in mb-4">
                    <div class="service-detail-card">
                        <h4 class="mb-3"><i class="fas fa-question-circle text-primary me-2"></i>项目开发周期是多久？</h4>
                        <p class="text-muted">根据项目复杂度不同，一般网站项目需要2-4周，软件系统需要1-3个月。我们会在需求沟通后给出详细的项目计划和时间表。</p>
                    </div>
                </div>
                <div class="col-lg-6 fade-in mb-4">
                    <div class="service-detail-card">
                        <h4 class="mb-3"><i class="fas fa-question-circle text-primary me-2"></i>如何保证项目质量？</h4>
                        <p class="text-muted">我们采用敏捷开发流程，每个阶段都有严格的测试和验收标准。同时提供项目演示、用户测试等环节，确保最终交付满足您的需求。</p>
                    </div>
                </div>
                <div class="col-lg-6 fade-in mb-4">
                    <div class="service-detail-card">
                        <h4 class="mb-3"><i class="fas fa-question-circle text-primary me-2"></i>售后服务如何？</h4>
                        <p class="text-muted">我们提供1年免费技术支持和维护服务，7×24小时响应机制。超过质保期后，也可选择年度维护服务套餐。</p>
                    </div>
                </div>
                <div class="col-lg-6 fade-in mb-4">
                    <div class="service-detail-card">
                        <h4 class="mb-3"><i class="fas fa-question-circle text-primary me-2"></i>费用如何计算？</h4>
                        <p class="text-muted">我们根据项目需求、功能复杂度、开发周期等因素综合评估。首次咨询免费，需求确认后会提供详细的报价方案。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="友links-section">
                <h4 class="text-center mb-4" style="color: white; font-weight: 600;">友情链接</h4>
                <div class="row">
                    <div class="col-12">
                        <div class="friendly-links">
                            <a href="https://www.aliyun.com" target="_blank" class="friendly-link">阿里云</a>
                            <a href="https://cloud.tencent.com" target="_blank" class="friendly-link">腾讯云</a>
                            <a href="https://www.huaweicloud.com" target="_blank" class="friendly-link">华为云</a>
                            <a href="https://github.com" target="_blank" class="friendly-link">Github</a>
                            <a href="https://www.bootcdn.cn" target="_blank" class="friendly-link">BootCDN</a>
                            <a href="https://www.npmjs.com" target="_blank" class="friendly-link">NPM</a>
                            <a href="https://developer.mozilla.org" target="_blank" class="friendly-link">MDN</a>
                            <a href="https://stackoverflow.com" target="_blank" class="friendly-link">StackOverflow</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center my-5">
                <div class="footer-links mb-4">
                    <a href="#" class="social-icon" title="微信"><i class="fab fa-weixin"></i></a>
                    <a href="#" class="social-icon" title="微博"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="social-icon" title="Github"><i class="fab fa-github"></i></a>
                    <a href="#" class="social-icon" title="领英"><i class="fab fa-linkedin"></i></a>
                    <a href="#" class="social-icon" title="Twitter"><i class="fab fa-twitter"></i></a>
                </div>
                <p class="mb-2" style="font-size: 1rem;">&copy; 2024 飞易腾科技 版权所有</p>
                <p class="text-muted small mb-4">专注于创新的网站建设服务 | 飞速响应 · 易用体验 · 腾飞助力</p>
            </div>

            <div class="footer-bottom">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                        <div class="qrcode-section">
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fab fa-weixin" style="font-size: 4rem; color: #07c160;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信公众号</p>
                                </div>
                            </div>
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fas fa-qrcode" style="font-size: 4rem; color: #6366f1;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信小程序</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-6">
                        <div class="beian-info">
                            <p class="mb-2">
                                <i class="fas fa-shield-alt me-2"></i>
                                <a href="https://beian.miit.gov.cn" target="_blank" class="beian-link">粤ICP备2024123456号-1</a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-balance-scale me-2"></i>
                                <a href="http://www.beian.gov.cn" target="_blank" class="beian-link">
                                    <img src="" alt="" class="me-1" style="vertical-align: text-bottom;">
                                    粤公网安备 44030502000000号
                                </a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-copyright me-2"></i>
                                增值电信业务经营许可证：粤B2-20240000
                            </p>
                            <p class="mb-0 small text-muted">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                公司地址：广东省深圳市南山区科技园南区深圳湾科技生态园
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-disclaimer">
                <p class="mb-0 small">
                    本网站所有内容及图片均受法律保护，未经许可不得转载、复制或镜像。
                    <span class="mx-2">|</span>
                    网站内容仅供参考，不作为任何法律依据。
                </p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>

    <script>
        // Navbar Scroll Effect
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Mobile Menu Toggle
        const navToggle = document.getElementById('navToggle');
        const mobileMenu = document.getElementById('mobileMenu');

        navToggle?.addEventListener('click', function() {
            mobileMenu.classList.toggle('active');
        });

        // Dark Mode Toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        const body = document.body;

        if (localStorage.getItem('darkMode') === 'enabled') {
            body.classList.add('dark-mode');
            darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }

        darkModeToggle.addEventListener('click', function() {
            body.classList.toggle('dark-mode');

            if (body.classList.contains('dark-mode')) {
                localStorage.setItem('darkMode', 'enabled');
                darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                localStorage.setItem('darkMode', null);
                darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            }
        });

        // Scroll Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(element => {
            observer.observe(element);
        });

        // Contact Form
        const contactForm = document.getElementById('contactForm');
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const submitBtn = this.querySelector('.submit-btn');
            const btnText = submitBtn.querySelector('.btn-text');

            submitBtn.classList.add('loading');
            btnText.textContent = '提交中...';
            submitBtn.disabled = true;

            setTimeout(() => {
                submitBtn.classList.remove('loading');
                btnText.textContent = '提交成功！';
                submitBtn.style.background = '#10b981';

                contactForm.reset();

                setTimeout(() => {
                    btnText.textContent = '提交咨询';
                    submitBtn.style.background = '';
                    submitBtn.disabled = false;
                }, 2000);
            }, 2000);
        });
    </script>
</body>
</html>
